<template>
  <view>
    <CustomNavbarHome :left="0" bg="#241e42">
      <view class="cust_nav">
        <view class="navbarTitle gradient-text">Games</view>
        <view @click="toRouter" class="message">
          <u-icon name="bell" size="16" color="white" bold></u-icon>
        </view>
      </view>
    </CustomNavbarHome>
    <view class="games">
      <view class="history">
        <view class="history-title color-white">History</view>
        <view class="flex-center history-list">
          <template v-for="(item, index) in historyList">
            <image :src="item.image" :key="index" mode="aspectFill" class="small-icon" />
          </template>
        </view>
      </view>
      <view class="hot mt-40">
        <view class="games-title gradient-text ml-17">HOT GAMES</view>
        <view class="hot-games mt-40 flex-center">
          <template v-for="(item, index) in hotGames">
            <view class="hot-games__item wrap" :key="index">
              <image :src="item.image" class="hot-games__item-image" mode="aspectFill" />
              <view class="hot-games__item-title color-white">{{ item.title }}</view>
              <view class="flex-center">
                <uni-icons type="star-filled" size="18" color="#f2bd42"></uni-icons>
                <text class="hot-games__item-num color-white">{{ item.starNum }}</text>
                <text class="hot-games__item-free color-white">Free</text>
              </view>
              <button type="primary" class="hot-games__item-btn view-center color-white">play</button>
            </view>
          </template>
        </view>
      </view>
      <view class="new mt-40">
        <view class="games-title gradient-text">NEW GAMES</view>
        <view class="new-games flex-center mt-40">
          <template v-for="(item, index) in newGames">
            <view
              class="new-games__item wrap"
              :style="{ backgroundColor: item.color }"
              :key="index"
            >
              <image :src="item.image" class="new-games__item-image" mode="aspectFill" />
              <view class="new-games__item-title color-white">{{ item.title }}</view>
              <view class="flex-center">
                <uni-icons type="star-filled" size="18" color="#fff"></uni-icons>
                <text class="new-games__item-num">{{ item.starNum }}</text>
                <text class="new-games__item-free color-white">Free</text>
              </view>
              <button type="primary" class="new-games__item-btn view-center" :style="{ color: item.color }">
                play
              </button>
            </view>
          </template>
        </view>
      </view>
      <view class="most mt-40">
        <view class="games-title gradient-text">MOST POPULAR GAMES</view>
        <view class="most-games mt-40 flex-center">
          <template v-for="(item, index) in mostGames">
            <view class="most-games__item" :key="index">
              <image :src="item.image" class="most-games__item-image" mode="aspectFill" />
              <view class="most-games__item-title color-white">{{ item.title }}</view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CustomNavbarHome from '../../components/CustomNavbar-home.vue'
export default {
  components: {
    CustomNavbarHome,
  },
  data() {
    return {
      historyList: [
        { image: require('../../static/games/game1.png') },
        { image: require('../../static/games/game1.png') },
        { image: require('../../static/games/game2.jpg') }
      ],
      hotGames: [
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9'
        },
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9'
        },
        {
          image: require('../../static/games/game2.jpg'),
          title: 'Roulette',
          starNum: '4.9'
        }
      ],
      newGames: [
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#efaf6a'
        },
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#6dbf8a'
        },
        {
          image: require('../../static/games/game2.jpg'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#4b95f7'
        }
      ],
      mostGames: [
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#efaf6a'
        },
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#6dbf8a'
        },
        {
          image: require('../../static/games/game2.jpg'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#4b95f7'
        },
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#efaf6a'
        },
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#6dbf8a'
        },
        {
          image: require('../../static/games/game2.jpg'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#4b95f7'
        },
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#efaf6a'
        },
        {
          image: require('../../static/games/game1.png'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#6dbf8a'
        },
        {
          image: require('../../static/games/game2.jpg'),
          title: 'Roulette',
          starNum: '4.9',
          color: '#4b95f7'
        }
      ]
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.navbarTitle {
  margin-left: 58rpx;
  font-family: Myriad Pro;
  font-weight: bold;
  font-size: 40rpx;
  color: #fdfdfd;
  line-height: 73rpx;
}

.cust_nav {
  padding: 0 20rpx;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  font-size: 36rpx;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
  // justify-content: space-around;
  .message {
    width: 49rpx;
    height: 49rpx;
    background: linear-gradient(-60deg, #a2c15f, #8ac017);
    border-radius: 19rpx;
    margin-left: auto;
    margin-right: 69rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.games {
  padding: 30rpx 30rpx 60rpx;
  &-title {
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 48rpx;
    color: #FDFEFB;

  }
  .history {
    &-title {
      font-size: 20rpx;
    }
    &-list {
      background-color: rgba(255, 255, 255,0.08);
      width: 100%;
      min-height: 124rpx;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      padding: 0 10rpx;
      margin-top: 7rpx;
      .small-icon {
        width: 97rpx;
        height: 98rpx;
        margin-right: 15rpx;
        border-radius: 20rpx;
        overflow: hidden;
        &:last-of-type {
          margin-right: 0;
        }
      }
    }
  }
  .hot-games,
  .new-games {
    .hot-games__item,
    .new-games__item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      flex-direction: column;
      margin-right: 30rpx;
      &:last-of-type {
        margin-right: 0;
      }
      .hot-games__item-image,
      .new-games__item-image {
        width: 192rpx;
        height: 192rpx;
        border-radius: 40rpx;
      }
      .hot-games__item-title,
      .new-games__item-title {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #FDFEFB;
        margin-top: 25rpx;
        margin-bottom: 30rpx;
      }
      .hot-games__item-free,
      .hot-games__item-num,
      .new-games__item-free,
      .new-games__item-num {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: bold;
      }
      .hot-games__item-num,
      .new-games__item-num {
        margin-right: 20rpx;
        margin-left: 10rpx;
      }
      .hot-games__item-btn,
      .new-games__item-btn {
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #FDFEFB;
        margin-top: 20rpx;
        width: 160rpx;
        height: 53rpx;
        background: #96C13B;
        border-radius: 27rpx;
      }
    }
  }
  .new-games {
    &__item {
      width: 204rpx;
      min-height: 301rpx;
      border-radius: 20rpx;
      margin-right: 30rpx;
      flex-direction: row !important;
      padding-bottom: 30rpx;
      margin-top: 32rpx;
      &:last-of-type {
        margin-right: 0;
      }
      &-image {
        border-radius: 20rpx;
        width: 128rpx !important;
        height: 128rpx !important;
        margin-top: -32rpx;
      }
      &-num {
        color: white !important;
      }
      &-btn {
        background-color: white !important;
      }
    }
  }
  .most-games {
    flex-wrap: wrap;
    &__item {
      margin-right: 44rpx;
      margin-bottom: 30rpx;
      width: 192rpx;
      &:nth-of-type(3n) {
        margin-right: 0;
      }
      &-image {
        width: 100%;
        // flex: 0 0 32%;
        height: 192rpx;
        border-radius: 40rpx;
      }
      &-title {
        font-size: 28rpx;
        font-weight: 400;
        line-height: 2.5;
        text-align: center;
      }
    }
  }
}
</style>
